<route lang="yaml">
	meta:
	enabled: false
</route>

<script setup lang="ts">
	import { ref } from 'vue'
	import dayjs from 'dayjs'
	import marketApi from '@/api/zhitan/market.ts'

	// import Api from '@/api/modules/system/user'
	const props = defineProps<{
		// infoform : any
	}>()
	const emits = defineEmits(['changedata'])
	const tableData = ref([])
	const background = ref(true)
	const allids : any = ref([])
	const allcateData : any = ref([])
	const adminid : any = ref(null)

	// const value = ref(true)
	const total : any = ref(0)
	const paging : any = ref({
		page: 1,
		limit: 10,
		status: 1
	})

	const { pagination } = usePagination()
	pagination.value.size = 20
	pagination.value.sizes = [20, 50, 100]

	onMounted(() => {
		// if (props.infoform) {
		// 	if (props.infoform.adminInfo && props.infoform.adminInfo.applet_user_id) {
		// 		allids.value.push(props.infoform.adminInfo.applet_user_id.id)
		// 		adminid.value = props.infoform.adminInfo.applet_user_id.id
		// 	}
		// 	if (props.infoform.staffList && props.infoform.staffList.length > 0) {
		// 		props.infoform.staffList.forEach((item : any) => {
		// 			allids.value.push(item.applet_user_id.id)
		// 		})
		// 	}
		// }
		getList()

	})
	function getList() {
		marketApi.Coupon_list(paging.value).then((res : any) => {
			if (res.code === 0) {
				tableData.value = res.data
				total.value = res.count
			}

		})
	}
	function changeSelect(e : any) {
		emits('changedata', e)
	}

	// 分页
	function sizeChange(val : any) {
		console.log(val, '分页')
		paging.value.limit = val
		getList()
	}
	// 分页
	function handleCurrentChange(val : any) {
		paging.value.page = val
		getList()
	}
</script>

<template>
	<el-dialog title="选择优惠券" width="1080px" size="small" :close-on-click-modal="false" append-to-body destroy-on-close>
		<el-form :inline="true" class="demo-form-inline" size="default">
			<el-form-item label="优惠券名称:">
				<el-input v-model="paging.name" placeholder="请输入优惠券名称" clearable @clear="paging.name = null" />
			</el-form-item>
			<el-form-item label="类型" style="width: 200px;">
				<el-select v-model="paging.type" clearable placeholder="请选择类型" @clear="paging.type = null">
					<el-option label="通用券" value="1" />
					<el-option label="品类券" value="2" />
					<el-option label="产品券" value="3" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getList">
					<template #icon>
						<svg-icon name="ep:search" />
					</template>
					查询
				</el-button>
				<el-button @click="paging = {
				  page: 1,
				  limit: 10,
				  status:1
				}, getList()">
					重置
				</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" highlight-current-row border height="60vh">
			<el-table-column prop="id" label="ID" width="60" align="center" />
			<el-table-column prop="name" label="优惠券名称" min-width="200">
				<template #default="{ row }">
					<div class="flex items-center">
						<!-- <image-preview :src="row.image" :width="60" :height="60" /> -->
						<div class="ml-2">
							<div class="f14 d-c mt-1 flex">
								<div class=" mr-2 flex items-center">
									{{ row.name }}
								</div>
							</div>
						</div>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="type" label="类型" width="100" align="center">
				<template #default="{ row: i }">
					<el-tag type="success" v-if="i.type===1">通用券</el-tag>
					<el-tag type="warning" v-if="i.type===2">品类券</el-tag>
					<el-tag type="primary" v-if="i.type===3">产品券</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="money" label="优惠券减免金额" width="150" align="center">
				<template #default="{ row: i }">
					{{i.money/100}}
				</template>
			</el-table-column>
			<el-table-column prop="money" label="产品分类" width="100" align="center">
				<template #default="{ row: i }">
					{{i.type===2&&i.product_group_info&& i.product_group_info.name?i.product_group_info.name:''}}
				</template>
			</el-table-column>

			<el-table-column prop="money" label="产品" width="100" align="center">
				<template #default="{ row: i }">
					{{i.type===3&&i.product_info&& i.product_info.name?i.product_info.name:''}}
				</template>
			</el-table-column>
			<el-table-column prop="aging_type" label="时效类型" width="100" align="center">
				<template #default="{ row: i }">
					<el-tag type="success" v-if="i.aging_type===1">固定天数</el-tag>
					<el-tag type="warning" v-if="i.aging_type===2">固定时段</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="day" label="有效天数" width="100" align="center">
				<template #default="{ row: i }">
					{{i.aging_type===1?i.day:''}}
				</template>
			</el-table-column>
			<el-table-column prop="start_time" label="有效时段" width="230" align="center">
				<template #default="{ row: i }">
					<div>
						<div v-if="i.aging_type===2">
							{{ dayjs(i.start_time * 1000).format('YYYY-MM-DD') }} 至
							{{ dayjs(i.end_time * 1000).format('YYYY-MM-DD') }}
						</div>
						<div v-else></div>
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="status" label="状态" width="100" align="center">
				<template #default="{ row }">
					<div v-if="row.status === 1" class="relative flex items-center justify-center">
						<div data-v-7edfc4d9="" class="badge relative mr-2 inline-flex">
							<span
								class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
						</div>
						正常
					</div>
					<div v-else class="relative flex items-center justify-center">
						<div data-v-7edfc4d9="" class="badge downcol relative mr-2 inline-flex">
							<span
								class="absolute left-[50%] top-0 z-20 h-1.5 w-1.5 whitespace-nowrap rounded-full bg-ui-primary px-1.5 text-xs text-ui-text ring-1 ring-light before:absolute before:left-0 before:top-0 left-[100%]! before:block before:h-full before:w-full -translate-x-[50%] -translate-y-[50%] before:animate-ping before:rounded-full before:bg-ui-primary px-0! -indent-9999 dark:ring-dark before:content-empty">true</span>
						</div>
						暂停
					</div>
				</template>
			</el-table-column> -->
			<!-- <el-table-column prop="remark" label="备注" min-width="250" align="left" /> -->
			<el-table-column prop="create_time" label="创建时间" width="180" align="center">
				<template #default="{ row: i }">
					{{ dayjs(i.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="80" align="center">
				<template #default="scope">
					<el-button :type="scope.row.ischange ? 'info' : 'primary'" size="small"
						:disabled="scope.row.ischange" @click.prevent="changeSelect(scope.row)">
						{{ scope.row.ischange ? '选择' : '选择' }}
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="flex items-center justify-center">
			<el-pagination v-model:current-page="paging.page" v-model:page-size="paging.limit" small
				:page-sizes="[10, 20, 50, 100]" :background="background" style="padding-top: 20px;"
				layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeChange"
				@current-change="handleCurrentChange" />
		</div>
	</el-dialog>
</template>

<style scoped>
	.avatar {
		:deep(.el-image) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.image-slot) {
			width: 100px !important;
			height: 100px !important;
		}

		:deep(.el-upload__tip) {
			display: none !important;
		}
	}
</style>